<template>
	<s-page>
		<view>
			<form @submit="checkInput">
				<view class="name">
					<text>姓名</text>
					<uni-easyinput :styles="styles" name="input" maxlength='50' v-model="name"></uni-easyinput>
				</view>
				<view class="phone">
					<text>固定电话</text>
					<uni-easyinput :styles="styles" maxlength='20' name="input" v-model="phone"></uni-easyinput>
				</view>
				<view class="mobile">
					<text>手机号码</text>
					<uni-easyinput id="mobileInput" :styles="styles" name="input" maxlength='20' v-model="mobile">
					</uni-easyinput>
				</view>
				<text style="float: left; color: #FF0000;margin: 0 0 0 100px;">{{tips}}</text>

				<button form-type="submit" class="sub_button">保存</button>
			</form>
		</view>
		<s-popup v-model="autoCloseVisible" animate="zoom-in" position="center" background="#fff" width="400"
			:duration="2000" radius="20">
			<view class="s-popup-view">
				<text class="s-popup-title">{{s_title}}</text>
				<view class="s-popup-main">
					<s-count-down ref="countDown" millisecond :auto-start="false" :time="2000" format="ss"
						@finish="onFinish" />{{s_errorMsg}}
				</view>
			</view>
		</s-popup>
	</s-page>
</template>
<script>
	import Dialog from '@/uni_modules/s-ui/utils/dialog'; //弹出框引入
	export default {
		data() {
			return {
				time: 2000,
				oldPassword: '',
				password: '',
				userName: '',
				ConfirmPass: '',
				tips: '',
				styles: {
					borderColor: '#FFFFFF'
				},
				department: "",
				description: "",
				id: "",
				loginName: "",
				mobile: "",
				name: "",
				orderNumber: '',
				password: null,
				phone: "",
				roleId: [],
				tips: '',

				autoCloseVisible: false, //弹出框
				s_errorMsg: '', //报错提示
				s_title: '', //报错标题
			}
		},
		onLoad(option) {

			// console.log(JSON.parse(option.department) )
			// console.log(option)
			this.department = JSON.parse(option.department)
			this.description = option.description
			this.id = option.ideee
			this.loginName = option.loginName
			this.mobile = option.mobile
			this.name = option.name
			this.orderNumber = option.orderNumber
			this.phone = option.phone
			this.roleId = JSON.parse(option.roleId)
			console.log("this.id", this.id, "option", option)
			// console.log("this.department",this.department.id,"this.roleId",this.roleId[0].id)

			let newRole = []
			for (let i = 0; i < this.roleId.length; i++) {
				// console.log(this.roleId[i].id)
				newRole.push(this.roleId[i].id)
			}
			this.roleId = newRole

		},
		methods: {
			checkInput() {


			},

			async modifyData() { //async 定义的函数会默认的返回一个Promise对象resolve的值
				var reg = /^1[0-9]{10}$/;
				if (reg.test(this.mobile)) {
					const res = await this
						.$myRequest({
							url: '/api-portal/staffs/save',
							method: "post",
							data: {
								"department": this.department.id, //不能改
								"description": this.description, //备注
								"id": this.id, //未知
								"loginName": this.loginName, //修改账号
								"mobile": this.mobile, //手机号码
								"name": this.name, //登录名
								"orderNumber": this.orderNumber, //序号
								"password": null, //新密码
								"phone": this.phone, //固定电话
								"roleId": this.roleId, //权限节点
							}
						})
					this.$refs.countDown.start();
					this.s_title = "修改成功"
					this.s_errorMsg = "秒后自动跳转首页"
					this.autoCloseVisible = true;
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/user/index'
						})
						// window.location.reload();
					}, 2100)
				} else {
					console.log("错误")
					this.tips = "请输入正确的手机号码"

				}
			}
		},


	}
</script>

<style lang="scss">
	.name,
	.phone,
	.mobile {
		height: 42px;
		background-color: #FFFFFF;
		margin-top: 10px;
		padding: 0 0 0 30px;

		color: #565656;
		font-size: 13px;
		font-weight: 600;

		display: flex;
		align-items: center;
		flex-direction: row;

	}

	.name text,
	.phone text,
	.mobile text {
		width: 80px;
	}


	.name input,
	.phone input,
	.mobile input {
		color: #565656;
		font-size: 13px;
		font-weight: 600;
	}

	/* 	.phone input {
		color: #565656;
		font-size: 13px;
		font-weight: 600;
	} */

	.sub_button {
		height: 38px;
		width: 90.6%;
		background-color: #109EF8;
		color: #FFFFFF;
		line-height: 38px;
		text-align: center;
		margin: 48px auto 0 auto;
		border-radius: unset;
	}

	.s-popup-view {
		// background-color: #0062CC;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.s-popup-title {
			// display: block;
			// position: absolute;
			// top: 30rpx;
			font-size: 38rpx;
			height: 76rpx;
			line-height: 76rpx;
		}

		.s-popup-main {
			font-size: 34rpx;
			margin: 30rpx 30rpx;
			display: flex;
			// position: absolute;
			// bottom: 0;
		}

	}
</style>
